<template>
    <div class="ysbz body">
        <div>
            <header class="ysHeader">
                <p>
                    <router-link :to="{path:'/Home'}">
                        <img src="../../assets/image/back.png" class="img">
                    </router-link>
                </p>

                <p>预算</p>
                <p>
                    <router-link :to="{path:'/ysck'}">
                        <img src="../../assets/image/toCK.png" class="img">
                    </router-link>
                </p>
            </header>
            <nav>
                <div class="ysNav">
                    <div @click="jump()">
                        <p class="ysIcon">
                            <img class="img" src="../../assets/image/YSBZ.png" alt="预算编制">
                        </p>
                        <p class="ysText ysTextColor">预算编制</p>
                    </div>
                    <div @click="change()">
                        <p class="ysIcon">
                            <img class="img" src="../../assets/image/YSSH-check.png" alt="预算审批">
                        </p>
                        <p class="ysText ">预算审批</p>
                    </div>
                    <div>
                        <p class="ysIcon yszgIcon">
                            <img class="img" src="../../assets/image/YSTZ.png" alt="预算调整">
                        </p>
                        <p class="ysText ysTextColor">预算调整</p>
                    </div>
                </div>
                <div class="ysYuanIcon">
                    <span class=" yuanIcons">
            <img class="img" src="../../assets/image/yuan.png">
          </span>
                </div>

            </nav>
            <div class="ys_nav">
                <p v-on:click="noFinish()" v-bind:class="{rowcolor:iscolor}">待处理</p>
                <p>
                    <img src="../../assets/image/line.png" alt="">
                </p>
                <p @click="finish()" v-bind:class="{textcolor:thatcolor}">已处理</p>
            </div>




            <!--<div class="mask" v-show="removeModel">
        <div class="model">
          <div class="removeData">
            <p>是否要删除此项目</p>
            <div class="removeBtn">
              <p v-tap="{methods:remove,data:0}">取消</p>
              <p v-tap="{methods:remove,data:1}">确定</p>
            </div>
          </div>

        </div>
      </div>-->

        </div>




    </div>
</template>

<script>
    export default {
        name: 'Budget',
        data() {
            return {
                iscolor: false,
                thatcolor: true,
             
                addTr: [{
                        "MC": "活动费用",
                        "value": '1',
                        "BZ": "嘿嘿"
                    },
                    {
                        "MC": "外出费用",
                        "value": '500',
                        "BZ": "呵呵"
                    },
                    {
                        "MC": "交通费用",
                        "value": '1000',
                        "BZ": "哈哈"
                    },
                    {
                        "MC": "出差费用",
                        "value": '655',
                        "BZ": "嘎嘎"
                    },
                ],
             
            }
        },

        methods: {
            noFinish() {
                this.iscolor = false
                this.thatcolor = true
            },
            finish() {
                this.iscolor = true
                this.thatcolor = false
            },
            jump() {
                this.$router.push("/Budget")
            },
            change() {
                this.$router.push("/BudgetTwe")
            }
        }


    }
</script>

<!-- Add "scoped" attriBnte to limit CSS to this component only -->
<style scoped>
    @import "./style.less"
</style>